<template>
    <div>
        {{info.name}}
        {{username}}

        <button @click="changeData">修改name</button>
    </div>
</template>
<script>
import { reactive, ref, watch } from 'vue';
export default {
    setup() {
        const info = reactive({name: "yzh", age: 18});

        //1.侦听 某一个值 时，传入一个getter函数
        // watch(() => info.name, (newval, oldval) => {
        //     console.log('新值：', newval, "旧值：", oldval)
        // })

        //2. 传入一个可响应式对象：reactive对象/ref对象
        //情况一：1.reactive对象获取到的newval和oldval本身都是reactive对象
        // watch(info, (newval, oldval) => {
        //     console.log('新值：', newval, "旧值：", oldval)
        //     //新值： Proxy {name: "ace", age: 18} 旧值： Proxy {name: "ace", age: 18}
        // })
        //2.如果希望是一个普通对象
        // watch(() => {  //
        //     return {...info}
        // }, (newval, oldval) => {
        //     console.log('新值：', newval, "旧值：", oldval)
        //     //新值： {name: "ace", age: 18} 旧值： {name: "yzh", age: 18}
        // })
        
        //情况二: ref对象获取newval和oldval是value值的本身
        const username = ref("qzt");
        watch(username, (newval, oldval) => {
            console.log('新值：', newval, "旧值：", oldval)
        })

        const changeData = () => {
            // info.name = "ace";

            username.value = "yzh";
        };

        return {
            info,
            changeData,
            username
        }
    }
}
</script>
<style>
</style>
